<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Clocks:  Binary Clock</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Mark Lockwood (sy161e.net@namezero.com)">
<META NAME="section" CONTENT="Clocks">
<META NAME="description" CONTENT="Ever seen binary code?  You know, the series of 1's and 0's.  This clock actually displays the time in the same binary format.  Definitely something cool to put on your site if you are a programmer.  ;-)">

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Mark Lockwood (sy161e.net@namezero.com) -->
<!-- Web Site:  http://www.sy161e.net -->




function syeClock() {
if (!document.layers && !document.all)
return;
timePortion = new Array;
maxLength = new Array;
var runTime = new Date();
timePortion[0] = runTime.getHours();
timePortion[1] = runTime.getMinutes();
timePortion[2] = runTime.getSeconds();
maxLength[0] = 5;
maxLength[1] = 6;
maxLength[2] = 6;
var decValue = 0;
var decMod = 0;
var temp = "";
var hoursBackground = "#7B7BB5";
var minutesBackground = "#4D5487";
var secondsBackground = "#424A63";
var colonBackground = "#000000";
var textColor = "#FFFFFF";
for (var curPor = 0; curPor <= 2; curPor++) {
decValue = timePortion[curPor];
timePortion[curPor] = "";
while (decValue != 0) {
decMod = decValue % 2;
decValue = Math.floor(decValue / 2);
timePortion[curPor] = decMod + timePortion[curPor];
}
if (timePortion[curPor].length < maxLength[curPor]) {
for (var i = 1; i <= maxLength[curPor] - timePortion[curPor].length; i++) {
temp += "0";
   }
}
timePortion[curPor] = temp + timePortion[curPor];
temp = "";
}
movingtime = '<table border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor='+ hoursBackground  +'><font color='+ textColor +'>' + timePortion[0] + '</font></td><td bgcolor='+ colonBackground +'>:</td><td bgcolor='+ minutesBackground +'><font color='+ textColor +'>' + timePortion[1] + '</font></td><td bgcolor='+ colonBackground +'>:</td><td bgcolor='+ secondsBackground +'><font color='+ textColor +'>' + timePortion[2] + '</font></td></tr></table>';
if (document.layers) {
document.layers.clock.document.write(movingtime);
document.layers.clock.document.close();
}
else if (document.all) {
clock.innerHTML = movingtime;
}
setTimeout("syeClock()", 1000)
}
window.onload = syeClock;
</script>
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /clocks/"><font color="#FF0000"><b>Clocks</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Binary Clock</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
Ever seen binary code?  You know, the series of 1's and 0's.  This clock actually displays the time in the same binary format.  Definitely something cool to put on your site if you are a programmer.  ;-)
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<p align="center">
Binary Time<br>
<span id="clock" style="position:relative;"></span>
</p>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Clocks:  Binary Clock</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  2.43 KB" size=24>
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- TWO STEPS TO INSTALL BINARY CLOCK:

  1.  Copy the coding into a new file, save as binaryclock.js
  2.  Add the last code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Save this code as a new file:  binaryclock.js  --&gt;



&lt;!-- Original:  Mark Lockwood (sy161e.net@namezero.com) --&gt;
&lt;!-- Web Site:  http://www.sy161e.net --&gt;

&lt;! &gt;
&lt;! &gt;

function syeClock() {
if (!document.layers && !document.all)
return;
timePortion = new Array;
maxLength = new Array;
var runTime = new Date();
timePortion[0] = runTime.getHours();
timePortion[1] = runTime.getMinutes();
timePortion[2] = runTime.getSeconds();
maxLength[0] = 5;
maxLength[1] = 6;
maxLength[2] = 6;
var decValue = 0;
var decMod = 0;
var temp = "";
var hoursBackground = "#7B7BB5";
var minutesBackground = "#4D5487";
var secondsBackground = "#424A63";
var colonBackground = "#000000";
var textColor = "#FFFFFF";
for (var curPor = 0; curPor &lt;= 2; curPor++) {
decValue = timePortion[curPor];
timePortion[curPor] = "";
while (decValue != 0) {
decMod = decValue % 2;
decValue = Math.floor(decValue / 2);
timePortion[curPor] = decMod + timePortion[curPor];
}
if (timePortion[curPor].length &lt; maxLength[curPor]) {
for (var i = 1; i &lt;= maxLength[curPor] - timePortion[curPor].length; i++) {
temp += "0";
   }
}
timePortion[curPor] = temp + timePortion[curPor];
temp = "";
}
movingtime = '&lt;table border="0" cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td bgcolor='+ hoursBackground  +'&gt;&lt;font color='+ textColor +'&gt;' + timePortion[0] + '&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='+ colonBackground +'&gt;:&lt;/td&gt;&lt;td bgcolor='+ minutesBackground +'&gt;&lt;font color='+ textColor +'&gt;' + timePortion[1] + '&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='+ colonBackground +'&gt;:&lt;/td&gt;&lt;td bgcolor='+ secondsBackground +'&gt;&lt;font color='+ textColor +'&gt;' + timePortion[2] + '&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
if (document.layers) {
document.layers.clock.document.write(movingtime);
document.layers.clock.document.close();
}
else if (document.all) {
clock.innerHTML = movingtime;
}
setTimeout("syeClock()", 1000)
}
window.onload = syeClock;




&lt;!-- STEP TWO: Copy this code into the BODY of your HTML document  --&gt;

&lt;BODY&gt;

&lt;script language="JavaScript" src="binaryclock.js"&gt;&lt;/script&gt;

&lt;p align="center"&gt;
Binary Time&lt;br&gt;
&lt;span id="clock" style="position:relative;"&gt;&lt;/span&gt;
&lt;/p&gt;

&lt;p&gt;&lt;center&gt;
&lt;font face="arial, helvetica" SIZE="-2"&gt;Free JavaScripts provided&lt;br&gt;
by &lt;a href="http://javascriptsource.com"&gt;JavaScript Source Code 3000&lt;/a&gt;&lt;/font&gt;
&lt;/center&gt;&lt;p&gt;

&lt;!-- Script Size:  2.43 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>
